<template>
  <div id="app">
    <keep-alive :include="keepAliveComponents">
      <router-view v-if="isRouterAlive"/>
    </keep-alive>
    <FloatingBox ref="floatBtn" :form="form">
      <menuPart ref="b" ></menuPart>
    </FloatingBox>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { VueEditor } from 'vue2-editor'
import FloatingBox from './components/floating-box'
import menuPart from './components/menuPart' // 导入悬浮框组件
export default {
  name: 'App',
  components: {
    menuPart,
    VueEditor,
    FloatingBox // 注册悬浮框组件
  },
  provide () {
    return {
      reload: this.reload
    }
  },
  data () {
    return {
      isDark: false,
      isRouterAlive: true,
      form: {
        themeColor: {
          hsl: { h: 200, s: 0, l: 0, a: 1 },
          hex: '#000000',
          hex8: '#000000FF',
          rgba: { r: 0, g: 0, b: 0, a: 1 },
          hsv: { h: 200, s: 0, v: 0, a: 1 },
          oldHue: 200,
          source: 'hex',
          a: 1
        },
        fontSize: 28
      }
    }
  },
  computed: {
    ...mapState({
      keepAliveComponents: state => state.routecache.keepAliveComponents
    })
  },
  methods: {
    changeMode (val) {
      // 获取html根元素标签
      let html = document.documentElement
      if (val) {
        // html添加class="dark"选择器
        html.classList.add('dark')
      } else {
        // html移除class="dark"选择器
        html.classList.remove('dark')
      }
    },
    closeMenuAndFloating () {
      this.$refs.floatBtn.closeMenuAndFloating()
    },
    reload () {
      this.isRouterAlive = false
      this.$nextTick(function () {
        this.isRouterAlive = true
      })
    }
  }
}

</script>
